$(function () {
    $(".dt").mouseover(function () {
        $(".dd").css("display", "block");

    });
    $(".dt").mouseout(function () {
        $(".dd").css("display", "none");
    })


    // 左侧切换图片jq
    $(".list_item li").mouseover(function () {
        var index = $(this).index();
        //    console.log(index);
        $(this).addClass("current").siblings().removeClass("current")
        //  普通写法
        //    $(".preview_img div").eq(index).show();
        //   $(".preview_img div").eq(index).siblings().hide();
        // 链式写法
        $(".preview_img div").eq(index).show().siblings().hide();
    })
});



// 封装版tab栏切换

// var a =document.querySelectorAll(".list_item li")
// var b =document.querySelectorAll(".preview_img div")

// jQuery.fn.extend({
//         DHQH:function(obj,target){
//             $(obj).mouseover(function(){
//                 var index = $(this).index();
//     console.log(obj.index)
//                 $(this).addClass("current").siblings().removeClass("current")
//                 target.eq(index).show().siblings().hide();
//             })
//         }
//     });


// // ;function($){
// //     $.fn.extend({
// //         "DHQH":function(obj,target){
// //             obj.mouseover(function(){
// //                 var index = $(this).index();
// //                 $(this).addClass("current").siblings().removeClass("current")
// //                 target.eq(index).show().siblings().hide();
// //             })
// //         }
// //     })
// // }(jQuery)


function tab_qiehuan(obj) {
    for (let i = 0; i < obj.length; i++) {
        obj[i].onclick = function () {
            for (let i = 0; i < obj.length; i++) {
                obj[i].className = '';  
            }
            this.className = 'current'
        };
    }
}


window.addEventListener('load', function () {
    var preview_img = document.querySelector('.preview_img')
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    preview_img.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        big.style.display = 'block';

    });
    preview_img.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        big.style.display = 'none';
    });
    preview_img.addEventListener('mousemove', function (e) {
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x,y);
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        // 遮蔽层不超大盒子
        // 遮挡层移动最大距离
        var maskMax = preview_img.offsetWidth - mask.offsetWidth
        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX >= maskMax) {
            maskX = maskMax;
        }

        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= maskMax) {
            maskY = maskMax;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';

        // 大图移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层移动最大距离
        var bigImg = document.querySelector('.bigImg')
        // 大图片最大移动距离
        var bigMax = bigImg.offsetWidth - big.offsetWidth;
        // 大图移动距离
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        // console.log(bigX,bigY);
        bigImg.style.left = -bigX + 'px';
        bigImg.style.top = -bigY + 'px';
    })
    var lis = document.querySelectorAll('.detail_tab_list li');
    var items = document.querySelectorAll('.item')

    for (var i = 0; i < lis.length; i++) {
        lis[i].setAttribute('index', i)
        lis[i].onclick = function () {
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = '';
            }
            this.className = 'current';
            var detail_index = this.getAttribute('index')
            // console.log(detail_index);
            for (let i = 0; i < items.length; i++) {
                items[i].style.display = 'none'
            }
            items[detail_index].style.display = 'block'
        }
    }
var xijie_lis = document.querySelectorAll('.tab_list li');
// console.log(xijie_lis);
var xijie_items =document.querySelectorAll('.qiehuan');
for (let i = 0; i < xijie_lis.length; i++) {
    xijie_lis[i].setAttribute('index',i);
    xijie_lis[i].onclick = function() {
        for (let i = 0; i < xijie_lis.length; i++) {
            xijie_lis[i].className = '';
        }
        this.className = 'current';
        var xijie_index = this.getAttribute('index');
        console.log(xijie_index);
        for (let i = 0; i < xijie_items.length; i++) {
            xijie_items[i].style = 'none'
        }
        xijie_items[xijie_index].style.display = 'block'
    }
}


var color_btn = document.querySelectorAll('.choose_color  a');
var btns_banben = document.querySelectorAll('.banben a');
var btns_rongliang = document.querySelectorAll('.rongliang a')
var btns_fangshi = document.querySelectorAll('.fangshi a')
var btns_taocan = document.querySelectorAll('.taocan a')
tab_qiehuan(color_btn);
tab_qiehuan(btns_banben);
tab_qiehuan(btns_fangshi);
tab_qiehuan(btns_rongliang);
tab_qiehuan(btns_taocan);

var jingse = document.querySelector('#jingse');
var daxiao = document.querySelector('#jinsedaxiao');
var baise = document.querySelector('#baise');
var chongdian = document.querySelector('#chongdian');

$(function(){
    $(jingse).click(function(){
        $(daxiao).addClass("current").siblings().hide();
    })
    $(jingse).siblings().click(function(){
        $(daxiao).removeClass("current").siblings().show();
    })
    $(baise).click(function(){
        $(chongdian).addClass("current").siblings().hide();
    })
    $(baise).siblings().click(function(){
        $(chongdian).removeClass("current").siblings().show();
    })
})
});








